<template>
  <div id="app ">
    <!-- logo  -->
    <div class="logo rideTopLeft">
      <!-- <img src="../../assets/logo_inrow.svg" style="display:block;height:6em;" alt=""> -->
      <h2>fregments</h2>
    </div>
    <!-- 移动端登录和注册模块 -->
    <div v-if="comShowing.menu" class="rideTopRight iconfont">
      <div :focus="false" class="acountUser" 
      tabindex="0"
      @focus="showMenu( $event, 5) "
      @blur="hideMenu( $event )"
      ></div>
      <div class="menu">
        <div class="item"
        @click="login"
        >登录</div>
        <div class="item"
        @click="register"
        >注册</div>
      </div>
    </div>
    <!-- pc端显示部分  -->
    <div class="container-fluid d-none  d-sm-none  d-md-none d-lg-block">
      <div class="row  bg-light ">
        <div class="col-8">
          <nav class="navbar navbar-light">
            
          </nav>
        </div>
        <div class="col-4 d-flex justify-content-end">
          <nav class="navbar navbar-light ">
            <button type="button" class="btn btn-primary m-1"
              @click="login"
            >登录</button>
            <button type="button" class="btn btn-outline-primary m-1"
            @click="register"
            >注册</button>
          </nav>
        </div>
      </div>
    </div>
    <div  class="restOfPart">
        <div class="container-sm  full-height  ">
         
          <div class="row no-gutters  full-height align-items-center">
            <div class="col-xl col">
              
            </div>
            <div class="col-xl-8 col-8 ">
              <wordinfo ref="wcard" :meaning="wordCard.info" />
              <div class="input-group mb-3">
                <input type="text" id="enw" class="form-control enword" placeholder="查英文单词" 
                v-model="keyWord" :data-content="info.checkingRes" data-toggle="popperMsg" title="Tip" data-placement="bottom"
                aria-label="单词" aria-describedby="单词检索"
                @click="resetInputer" @keyup.enter="lookupAword"
                
                >
                <div class="input-group-append">
                  <span class="input-group-text btn btn-primary" id="basic-addon2"
                  @click="lookupAword" 
                  
                  >查看</span>
                </div>
              </div>
              <div v-if="showLoading" class="text-center">
                  <div class="spinner-border" role="status">
                    <span class="sr-only">Loading...</span>
                  </div>
              </div>
              
            </div>
            <div class="col-xl col">
              
            </div>
          </div>
        </div> 
        
    </div>
     <!-- 登录模块 -->
     <login ref="loginer" :leader="this" ></login>
  </div>
</template>

<script>
import login from "../toast.vue";
import wordinfo from "../EnwordCard/wordCard.vue";
import { checkEnWord } from "../../../api/homePage.js";
import { mixin } from "../../mixins/opr.js";


export default {
  components:{
    login,
    wordinfo
  },
  data(){
    return {
      keyWord:"",
      showLoading: false,
      info:{
        checkingRes:""
      },
      wordCard:{
        info: null
      },
      comShowing:{
        menu: false
      }
    };
  },
  mixins:[ mixin ],
  provide(){
    return {
      getParent: function(){
        return this;
      }
    };
  },
  watch:{
    "keyWord": function(newval){
      if( newval == "" ){
        this.info.checkingRes = "";
        this.$refs.wcard.show = false;
      }
    }
  },
  methods: {
    login(){
      // console.log("hello: ", this.$refs.loginer);
      this.$refs.loginer.showToast("login");
        // console.log("control router: ", this.$controlRouter); 
      // this.$controlRouter.addRouterComp(this);
      // this.$router.replace('/func')
      // console.log("router: ", this.$router);
      // this.$router.options.routes.shift();
    },
    register(){
      this.$refs.loginer.showToast("register");
    },
    async lookupAword(){
      this.showLoading = true;
      this.wordCard.info = null;
      let that = this;
     
      if( !this.$validate.isEmpty(this.keyWord) ){
        //单词是空字符串
          this.info.checkingRes = "请输入英文单词";
          this.showLoading = false;
          this.$nextTick(function(){
            that.$('#enw').popover("show");
          });
        return ;
      }

      let res = null;
     
         res = await checkEnWord(this.keyWord);
          
          if( res ){
          
          this.showLoading = false;
          if( res.code === 0 ){
            //console.log("查询成功");
            //初始化单词卡片
            this.wordCard.info = res.data.meaning;
            return ;
          }

          
          //错误处理
          this.info.checkingRes = res.msg + ", 请重新输入。";
          this.$nextTick(function(){
            that.$('#enw').popover("show");
          });
        }
     
      
        
    },
    resetInputer(){
      // console.log(this.$('.popover'));
      if(this.$('.popover').length !== 0 ){
        this.keyWord = "";
        this.$('#enw').popover("dispose");
        this.info.checkingRes = "";
        this.$refs.wcard.show = false;
      }
      
    }
  },
  mounted() {
    
    if( !this.ispc() ){
      //移动端
      this.comShowing.menu = true;
    }else{
      //pc端
      this.comShowing.menu = false;
    }
  }
}
</script>

<style lang="scss" >
html,body{
  height: 100%;
}
#app {
  position: relative;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.rideTopLeft{
  position:fixed;
  left: .5em;
  top:0;
  z-index: 10;
}

.rideTopRight{
  position:fixed;
  right: .5em;
  top: 1em;
  z-index: 10;
}

.restOfPart{
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/ocean.jpg");
  background-size: cover;
}
.full-height{
  height: 100%;
}
.menu{
  overflow: hidden;
  background-color: white;
  border-bottom-right-radius: .5em;
  border-bottom-left-radius: .5em;
  max-height: 0;
  padding: 0 .3em 0em .3em;
  transition: max-height 1s;
  -moz-transition: max-height 1s;	/* Firefox 4 */
  -webkit-transition: max-height 1s;	/* Safari 和 Chrome */
  -o-transition: max-height 1s;	/* Opera */
  .item + .item{
    
    border-top: 1px solid grey;
  }
}
// .acountUser:focus + .menu{
//   max-height: 5em;
// }
.item{
  text-align: center;
  padding: .3em 0; 
}
.item:last-child{
  padding-bottom: 1em;
}
</style>
